<template>
  <div>
    <el-drawer
      v-model="dialogVisible"
      title="批量升级"
      width="600px"
      :append-to-body="true"
      class="scene-submit"
    >
      <div class="submit-msg"><el-icon><SuccessFilled /></el-icon>升级批次已创建</div>
      <p>如需立即进行设备升级，请点击立即升级</p>
      <div class="scene-dialog__footer">
        <el-button @click="handelView">查看批次</el-button>
        <el-button type="primary" @click="handleUpdate">立即升级</el-button>
      </div>
      <div v-if="isTip" class="submit-tip">
        <el-icon><WarningFilled /></el-icon>
        有批次正在升级，待完成后才可发起新的升级任务
      </div>

    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { otaUpgrade } from '@/api/collect'

const isTip = ref(false)

const formItem = reactive({
  id: null,
})

const pkgInfo = reactive({
  id: null,
  name: '',
  ver: '',
})

const dialogVisible = ref(false)

const router = useRouter()

const handelView = () => {
  router.push({
    name: 'OtaDetail',
    query: {
      id: pkgInfo.id,
      name: pkgInfo.name,
      ver: pkgInfo.ver
    }
  })
}

const handleUpdate = async () => {
  isTip.value = false
  otaUpgrade(formItem)
  .then(() => {
    dialogVisible.value = false
    ElMessage.success('升级成功！')
    router.push({ path: '/collect/ota' })
  })
  .catch((err:any) => {
    isTip.value = true
    ElMessage.error('升级失败！'+ err.msg)
  })
}

defineExpose({ dialogVisible, formItem, pkgInfo})
</script>
<style lang="scss">
.scene-submit {
  .el-drawer__header {
    margin-bottom: 0;
  }
  > div {
    text-align: center;
    padding: 80px 48px;
    > div {
      margin-bottom: 20px;
    }
    .submit-msg {
      font-size: 20px;
      color: #333;
      vertical-align: middle;
      .el-icon {
        font-size: 40px;
        color: #67C23A;
        margin-right: 5px;
        vertical-align: middle;
      }
    }
    p {
      font-size: 16px;
      color: #333;
      margin: 32px 0 40px;
    }
    .submit-tip {
      margin-top: 36px;
      color: #E7A753;
      background: #FDF6EC;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #FAECD8;
      line-height: 64px;
      .el-icon {
        font-size: 16px;
        color: #F7B955;
        vertical-align: sub;
      }
    }
  }
}
</style>
